<!DOCTYPE html>
<html>
<head>
    <title>闹钟</title>
    <style>
        .clock-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        
        .clock {
            width: 300px;
            height: 300px;
            border: 10px solid #333;
            border-radius: 50%;
            position: relative;
            background-color: #f0f0f0;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        
        /* 分钟刻度样式 */
        .minute-mark {
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 10px;
            background-color: #333;
            transform-origin: 50% 150px; /* 以时钟中心为旋转原点 */
        }
        
        /* 小时刻度样式（更长更粗） */
        .hour-mark {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 15px;
            background-color: #333;
            transform-origin: 50% 150px; /* 以时钟中心为旋转原点 */
        }
        
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 15px;
            height: 15px;
            background-color: #333;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        
        .hour-hand {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 80px;
            background-color: #333;
            transform-origin: 50% 100%;
            transform: translate(-50%, -100%) rotate(0deg);
            border-radius: 5px;
            z-index: 3;
        }
        
        .minute-hand {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 4px;
            height: 120px;
            background-color: #666;
            transform-origin: 50% 100%;
            transform: translate(-50%, -100%) rotate(0deg);
            border-radius: 3px;
            z-index: 2;
        }
        
        .controls {
            margin-top: 30px;
            display: flex;
            gap: 20px;
        }
        
        .time-input {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .time-input label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .time-input input {
            width: 60px;
            padding: 8px;
            font-size: 16px;
            text-align: center;
        }
        
        .set-btn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .set-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <h1>闹钟</h1>
        <div class="clock" id="clock">
            <!-- 刻度将通过JavaScript生成 -->
            <div class="hour-hand" id="hourHand"></div>
            <div class="minute-hand" id="minuteHand"></div>
            <div class="center"></div>
        </div>
        
        <div class="controls">
            <div class="time-input">
                <label for="hour">小时</label>
                <input type="number" id="hour" min="0" max="23" placeholder="0-23">
            </div>
            
            <div class="time-input">
                <label for="minute">分钟</label>
                <input type="number" id="minute" min="0" max="59" placeholder="0-59">
            </div>
        </div>
        
        <button class="set-btn" onclick="setClock()">设置时间</button>
    </div>

    <script>
        // 创建时钟刻度
        function createClockMarks() {
            const clock = document.getElementById('clock');
            
            // 创建60个分钟刻度
            for (let i = 0; i < 60; i++) {
                const mark = document.createElement('div');
                const angle = i * 6; // 每个刻度间隔6度 (360/60)
                
                if (i % 5 === 0) {
                    // 每5分钟一个大刻度（小时刻度）
                    mark.className = 'hour-mark';
                } else {
                    // 普通分钟刻度
                    mark.className = 'minute-mark';
                }
                
                // 设置旋转原点为时钟中心 (150px 是半径)
                mark.style.transform = `rotate(${angle}deg)`;
                
                clock.appendChild(mark);
            }
        }
        
        function setClock() {
            const hourInput = document.getElementById('hour');
            const minuteInput = document.getElementById('minute');
            
            const hour = parseInt(hourInput.value) || 0;
            const minute = parseInt(minuteInput.value) || 0;
            
            // 验证输入值
            if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
                alert("请输入有效的时间！小时：0-23，分钟：0-59");
                return;
            }
            
            // 计算时针和分针的角度
            // 分针每分钟转动6度 (360/60)
            const minuteAngle = minute * 6;
            
            // 时针每小时转动30度 (360/12)，每分钟转动0.5度 (30/60)
            const hourAngle = (hour % 12) * 30 + minute * 0.5;
            
            // 设置指针旋转角度
            document.getElementById('hourHand').style.transform = 
                `translate(-50%, -100%) rotate(${hourAngle}deg)`;
            document.getElementById('minuteHand').style.transform = 
                `translate(-50%, -100%) rotate(${minuteAngle}deg)`;
        }
        
        // 初始化时显示12:00
        window.onload = function() {
            createClockMarks(); // 创建刻度
            document.getElementById('hour').value = 12;
            document.getElementById('minute').value = 0;
            setClock();
        };
    </script>
</body>
</html>